<template>
    <div class="lay">
      <h1>{{ msg }}</h1>
      <form @submit.prevent="addTodo">  
      <input type="text" v-model="newTodo" placeholder="Add a new todo">  
      <button type="submit">Add Todo</button>  
    </form> 
    <ul>  
      <li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>  
    </ul>   
    </div>
  </template>
  
 
  <script>
  import { ref } from 'vue';
  export default {  
  name: 'TodoList',  
  setup() {  
    const todos = ref([])  
    const newTodo = ref('')  
  
    const addTodo = () => {  
      todos.value.push(newTodo.value)  
      newTodo.value = ''  
    }  
  
    const getTodoCount = () => {  
      return todos.value.length  
    }  
  
    return {  
      todos,  
      newTodo,  
      addTodo,  
      getTodoCount  
    }  
  }  
}  
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
   

  </style>
  